<template>
	<el-dialog class="abow-dialog" :visible.sync="visible" top="15vh"
		title="批量配置" :close-on-click-modal="false"
		:close-on-press-escape="false" width="650px" @close="closeFn">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="160px" size="medium" :inline="false"
			labelSuffix="：">
			<div class="d-flex flex-row a-center mb-10">
				<el-form-item class="mb-0 flex-1 mr-10" prop="recharge_template_id" label="首充模板">
					<el-select :disabled="!isTemplete" filterable :loading="templeteListLoading" remote clearable v-model="dataForm.recharge_template_id" placeholder="请选择" @focus="getTempleteFn(1)">
						<el-option v-for="(item,index) in templeteList" :key="index" :label="item.label" :value="parseInt(item.value)"></el-option>
					</el-select>
				</el-form-item>
				<div class="d-flex flex-shrink">
					<el-switch v-model="isTemplete"></el-switch>
				</div>
			</div>
			<div class="d-flex flex-row a-center mb-10">
				<el-form-item class="mb-0 flex-1 mr-10" prop="assistant_recharge_template_id" label="复充模板">
					<el-select :disabled="!isAssistantTemplete" filterable :popper-append-to-body="false" :loading="templeteListLoading" remote clearable v-model="dataForm.assistant_recharge_template_id" placeholder="请选择" @focus="getTempleteFn(1)">
						<el-option v-for="(item,index) in templeteList" :key="index" :label="item.label" :value="parseInt(item.value)"></el-option>
					</el-select>
				</el-form-item>
				<div class="d-flex flex-shrink">
					<el-switch v-model="isAssistantTemplete"></el-switch>
				</div>
			</div>

			<div class="d-flex flex-row a-center mb-10">
				<el-form-item class="mb-0 flex-1 mr-10" prop="assistant_recharge_template_id" label="挽留模板">
					<el-select :disabled="!retentionTemplete" filterable :popper-append-to-body="false" :loading="templeteListLoading" remote clearable v-model="dataForm.retention_template_id" placeholder="请选择" @focus="getTempleteFn(2)">
						<el-option v-for="(item,index) in templeteList2" :key="index" :label="item.label" :value="parseInt(item.value)"></el-option>
					</el-select>
				</el-form-item>
				<div class="d-flex flex-shrink">
					<el-switch v-model="retentionTemplete"></el-switch>
				</div>
			</div>

			
			<div class="d-flex flex-row a-center mb-10">
				<el-form-item class="mb-0 flex-1 mr-10" prop="backhaul_setting_id" label="回传监测模板">
					<el-select :disabled="!isBackhaul" filterable clearable v-model="dataForm.backhaul_setting_id" placeholder="请选择" @focus="getBackhaulSettingFn">
						<el-option v-for="(item,index) in backhaulSetting" :key="index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<div class="d-flex flex-shrink">
					<el-switch v-model="isBackhaul"></el-switch>
				</div>
			</div>
			
			<div class="d-flex flex-row a-center" style="justify-content: space-between;">
				<el-form-item prop="playlet_number_num" label="付费集数">
					<el-input style="" :min="0" :disabled="!isjishu"  type="number" v-model="dataForm.playlet_number_num" placeholder="请输入"
						clearable>
						<template slot="prepend">第</template>
						<template slot="append">集起</template>
					</el-input>
				</el-form-item>
				<div class="d-flex flex-shrink">
					<el-switch v-model="isjishu"></el-switch>
				</div>
			</div>
			
			<div class="d-flex flex-row a-center" style="margin-top: 20px;justify-content: space-between;">
				<el-form-item prop="playlet_number_num_pay" label="单集价格">
					<el-input class="" :min="0" :disabled="!isdanjia" type="number" v-model="dataForm.playlet_number_num_pay" placeholder="请输入"
						clearable>
						<template slot="append">追剧币</template>
					</el-input>
				</el-form-item>
				<div class="d-flex flex-shrink">
					<el-switch v-model="isdanjia"></el-switch>
				</div>
			</div>
			
			
			
			
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import {
		isEmail,
		isMobile
	} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				isjishu:false,
				isdanjia:false,
				appletId:'',
				isTemplete:false,
				isAssistantTemplete:false,
				retentionTemplete:false,
				isBackhaul:false,
				templeteListLoading:false,
				dataId:null,
				backhaulSetting:[],
				platformId:[],
				companyName: [],
				appletList:[],
				playletList:[],
				allEpisodeList:[],
				templeteList:[],
				templeteList2:[],
				visible: false,
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				noPlaylet: false,//是否显示没有短剧
				roleList: [],
				roleIdListDefault: [],
				dataForm: {
					data_spread_ids: [], //推广链接名称	
					recharge_template_id:'',//首充模板id
					assistant_recharge_template_id:'',//复充模板id
					backhaul_setting_id:'',//回传监测链接id
					playlet_number_num:0,
					playlet_number_num_pay:0,
					retention_template_id:''
				}
			}
		},
		created() {},
		computed: {
			dataRule() {
				return {
				}
			}
		},
		watch:{
		},
		methods: {
			closeFn(){
				this.$refs.dataForm.resetFields();
				this.isTemplete = false;
				this.isAssistantTemplete = false;
				this.dataForm.data_spread_ids = [];
				this.dataForm.recharge_template_id = '';
				this.dataForm.assistant_recharge_template_id = '';
				this.dataForm.backhaul_setting_id = '';
				this.dataForm.retention_template_id = ''
			},
			//小程序列表
			async getAppletFn(){
				console.log(this.dataForm);
				const appletRes = await this.$axios.get(`/api/delivery/company/getApplet`);
				console.log(appletRes);
				if(Array.isArray(appletRes)){
					if(appletRes.length){
						this.appletList = appletRes;
						return;
					}
				}
				this.appletList = [];
			},
			//充值模板列表
			async getTempleteFn(type,){
				this.templeteListLoading = true;
				const templeteListRes = await this.$axios.get(`/api/delivery/dataSpread/getTemplete/${type}`);
				this.templeteListLoading = false;
				if(Array.isArray(templeteListRes)){
					if(templeteListRes.length){
						this[type == 1 ? 'templeteList' : 'templeteList2' ] = templeteListRes;
						console.log(this[type == 1 ? 'templeteList' : 'templeteList2' ]);
						return;
					}
				}
				this[type == 1 ? 'templeteList' : 'templeteList2' ] = [];
			},
			//回传监测模板列表
			async getBackhaulSettingFn(){
				console.log('回传监测模板列表回传监测模板列表');
				const backhaulSettingRes = await this.$axios.get(`/api/delivery/dataSpread/deliverySettings/${this.appletId}`);
				console.log(backhaulSettingRes);
				if(Array.isArray(backhaulSettingRes)){
					if(backhaulSettingRes.length){
						this.backhaulSetting = backhaulSettingRes;
						return;
					}
				}
				this.backhaulSetting = [];
			},
			init() {
				this.visible = true;
				this.isTemplete = false;
				this.isAssistantTemplete = false;
				this.isBackhaul = false;
				this.retentionTemplete = false;
				this.isjishu=false;
				this.isdanjia=false;
				
				this.getAppletFn();
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					if(this.dataForm.backhaul_setting_id||this.dataForm.recharge_template_id || this.dataForm.retention_template_id || (this.isjishu &&this.dataForm.playlet_number_num!=0 ) || (this.isdanjia &&this.dataForm.playlet_number_num_pay!=0 ) ) {
						let data = {'data_spread_ids':this.dataForm.data_spread_ids};
						if(this.isBackhaul){
							data['backhaul_setting_id'] = this.dataForm.backhaul_setting_id;
						}
						if(this.isTemplete){
							data['recharge_template_id'] = this.dataForm.recharge_template_id;
						}
						if(this.isAssistantTemplete){
							data['assistant_recharge_template_id'] = this.dataForm.assistant_recharge_template_id;
						}
						if(this.retentionTemplete){
							data['retention_template_id'] = this.dataForm.retention_template_id;
						}
						
						// isjishu:false,isdanjia:false,
						if(this.isjishu){
							if(this.dataForm.playlet_number_num!=0){
								data['playlet_number_num'] = this.dataForm.playlet_number_num;
							}
							
						}
						if(this.isdanjia){
							if(this.dataForm.playlet_number_num_pay!=0){
								data['playlet_number_num_pay'] = this.dataForm.playlet_number_num_pay;
							}
							
						}
						console.log(209,data);
						this.$axios.post('/api/delivery/dataSpread/batchSettings', data).then(res => {
							console.log(227,res)
							if(res==''){
								this.$message({
									message: this.$t('views.public.success'),
									type: 'success',
									duration: 500,
									onClose: () => {
										this.visible = false;
										this.$emit('refreshDataList');
									}
								})
							}
							
						}).catch((err) => {
							console.log(238,err)
						})
					}else{
						return this.$message({
							message: '请选择配置',
							type: 'error',
							duration: 2000
						})
					}
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 540px;
	}
	.el-form-item {
	    margin-bottom: 0px !important;
	}
</style>